<template>
	<div class="upload_file">
		<van-form input-align="right" ref="uploadForm">
			<!--<van-notice-bar v-if="!detail.canUploadPhoto" wrapable :scrollable="false" text="当前状态无法上传或修改会议资料" />-->
			<div
				v-for="(val, idx) in uploadForm.meetingSpeakerPhotoVOS"
				:key="`speakerPatient-${idx}`"
			>
				<div class="pt-4">
					<van-divider
						content-position="center"
						:style="{ color: '#1B40CD', borderColor: '#1B40CD' }"
					>
						{{ val.speakerName }} | {{ val.roleName }}
					</van-divider>
					<div
						v-for="(item, index) in val.meetingPhotoJsonVos"
						:key="'speakerUpload' + index"
					>
						<van-field :label="item.name" required :border="false">
							<template #input>
								<upload-mutipart
									@deleteFile="deleteFile"
									@uploadSucc="uploadSucc"
									:maxFileCount="item.max"
									:type="`speaker-${idx}-${index}`"
									:files="item.url"
									:capture="item.camera"
								></upload-mutipart>
							</template>
						</van-field>
					</div>
				</div>
			</div>
			<div class="divider_box">
				<van-divider
					content-position="center"
					:style="{ color: '#1B40CD', borderColor: '#1B40CD' }"
				>会议其他照片</van-divider>
			</div>
			<div
				v-for="(item, index) in uploadForm.meetingPhotoJsonVos"
				:key="'uploadOtherMeeting-' + index"
			>
				<div>
					<van-field :label="item.name" required :border="false">
						<template #input>
							<upload-mutipart
								@deleteFile="deleteFile"
								@uploadSucc="uploadSucc"
								:maxFileCount="item.max"
								:type="`meeting-${index}`"
								:files="item.url"
								:capture="item.camera"
							></upload-mutipart>
						</template>
					</van-field>
				</div>
			</div>
		</van-form>
		<van-row :gutter="20" justify="center" class="pb-4" style="margin-top: 30px">
			<van-col :span="20">
				<van-button
					block
					type="primary"
					@click="onSubmitHandler"
				>提交</van-button>
			</van-col>
		</van-row>
		<van-back-top right="5vw" bottom="20vh" style="z-index:101" />
	</div>
</template>
<script setup>
import { ref, toRefs, onMounted, inject } from "vue";
import { showNotify, showConfirmDialog, showDialog, showToast } from "vant";

const props = defineProps({
	detail: {
		type: Object,
		default: () => {}
	}
})

const api = inject('api')
const uploadForm = ref({})

// 删除照片
const deleteFile = ({ type, url }) => {
	const typeList = type.split('-')

	if (typeList[0] == 'meeting') {
		const uploadList = uploadForm
				.value
				.meetingPhotoJsonVos[typeList[1]]
				.url;

		uploadForm
			.value
			.meetingPhotoJsonVos[typeList[1]]
			.url
			.splice(uploadList.indexOf(url), 1);
	}

	if (typeList[0] == 'speaker') {
		const uploadList = uploadForm
				.value
				.meetingSpeakerPhotoVOS[typeList[1]]
				.meetingPhotoJsonVos[typeList[2]]
				.url;
		uploadForm
			.value
			.meetingSpeakerPhotoVOS[typeList[1]]
			.meetingPhotoJsonVos[typeList[2]]
			.url
			.splice(uploadList.indexOf(url), 1);
	}
}
// 上传成功
const uploadSucc = ({ type, url, fullTime, shortTime }) => {
	const typeList = type.split('-')

	switch (typeList[0]) {
		case 'meeting':
			uploadForm
				.value
				.meetingPhotoJsonVos[typeList[1]]
				.url
				.push({ url, fullTime, shortTime })
			break;
		case 'speaker':
			uploadForm
				.value
				.meetingSpeakerPhotoVOS[typeList[1]]
				.meetingPhotoJsonVos[typeList[2]]
				.url
				.push({ url, fullTime, shortTime })
			break;
	}
}

// 提交校验
const submitVerify = () => {
	const { meetingPhotoJsonVos, meetingSpeakerPhotoVOS } = uploadForm.value
	for (let i = 0; i < meetingPhotoJsonVos.length; i ++) {
		const item = meetingPhotoJsonVos[i]
		if (item.url.length < item.num) {
			showToast(`其它会议照片的${item.name}数量最少需要上传${item.num}张`)
			return false
		}
	}

	for (let i = 0; i < meetingSpeakerPhotoVOS.length; i ++) {
		const p = meetingSpeakerPhotoVOS[i]
		for (let j = 0; j < p.meetingPhotoJsonVos.length; j ++) {
			const item = p.meetingPhotoJsonVos[j]
			if (item.url.length < item.num) {
				showToast(`${p.speakerName}的${item.name}数量最少需要上传${item.num}张`)
				return false
			}
		}
	}

	return true
}
// 点击提交
const onSubmitHandler = () => {
	if (!submitVerify()) return

	const { detail } = toRefs(props)

	showConfirmDialog({
		title: '温馨提示',
		message: '确定提交该会议资料吗？'
	})
	.then(() => {
		return api.meetingUploadPhoto({
			id: detail.value.id,
			photoJson: JSON.stringify(uploadForm.value)
		})
	})
	.then(res => {
		if (!res.code) {
			showToast('上传成功')
		}
	})
	.catch(() => {})
}

// 初始化
const init = () => {
	const { detail } = toRefs(props)
	uploadForm.value = JSON.parse(detail.value.photoJson)
	console.log(uploadForm.value)
}

onMounted(() => {
	init()
})
</script>

<style>
.upload_file .van-cell {
  padding-left: 0;
  padding-right: 0;
}
.upload_file .van-uploader__wrapper {
  justify-content: flex-end;
}
.upload_file .van-uploader__preview,
.upload_file .van-uploader__upload {
  margin-left: var(--van-padding-xs);
  margin-right: 0;
}
.upload_file .divider_box {
  padding-top: 14px;
}
.upload_file .van-divider {
  margin-top: 0;
}
</style>
